<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("path",request.getContextPath());
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery1.5.1.js"></script>
<!-- 下拉分页实现  <script type="text/javascript" src="js/scrollpagination.js"></script>-->
<script type="text/javascript" src="js/json2.js"></script>
<link href="css/scrollpagination_demo.css" rel="stylesheet" media="screen" />

<script type="text/javascript">
				$(document).ready(function(){
						//使图标始终位于浏览器底部
						 $(window).resize(function(){ 
							cover();
							});	
						//浏览器窗口变化	
							cover();
						
					
						//简介页面出现
						$("#image01").click(function(){
									$("#fuwu_div").fadeOut();			
									$("#jianjie_div").fadeIn(1000);						
							});
						//服务范围
						$("#image02").click(function(){
									$("#jianjie_div").fadeOut();			
									$("#fuwu_div").fadeIn(1000);					
							});
					
					
						//标题栏和下划线的淡入
										 $("#image01").fadeIn(3000);
										 $("#image02").fadeIn(3000);
										 $("#image03").fadeIn(3000);
										 $("#image04").fadeIn(3000);
										 $("#image05").fadeIn(3000);
										 $("#image06").fadeIn(3000);
										 
										 
								var  $slider = $(".curBg1")
										$liCur = $("#image01"),
				  					curP = -1,
				  					curW = -1;
				  					
										$navBox = $(".imag");
										 $targetEle = $(".cur"),
										 
										
										$targetEle.mouseenter(function () {
										  var $_parent = $(this).parent().parent(),
											_width = $_parent.outerWidth(true),
											posL = $_parent.position().left;
										  $slider.stop(true, true).animate({
											"left":posL,
											"width":_width
										  }, "fast");
										});
										

									}); 
						function cover(){
						 	var win_width = $(window).width();
							var win_height = $(window).height();
							
							$(".box").css({
								width:win_width,
								height:win_height
								});
							$("#bigpicarea").css({
								width:win_width,
								height:win_height
								});
							$(".images").css({
								width:win_width,
								height:win_height
								});
							//顶部logo
							$("#ding_logo_div").css({
								left:win_width*0.5-win_width*0.1*0.7,
								top:0
								});
							$("#ding_logo").css({
								width:win_width*0.1,
								height:win_height*0.1
								});
								
							//底部logo
							$("#bottom_logo_div").css({
								left:win_width*0.5-win_width*0.05*0.9,
								bottom:0
								});
							$("#bottom_logo").css({
								width:win_width*0.05,
								height:win_height*0.08
								});
							$("#bottom_di_div").css({
								left:win_width*0.5-win_width*0.04,
								bottom:0
								});
							$("#bottom_di").css({
								width:win_width*0.04,
								height:win_height*0.024
								});
								
							
							$(".nav").css({
								 width:win_width,
								});
								
							$("#box1").css({
								width:win_width,
								
								bottom:0
								});
							//尖角背景里面的内容
							$("#box1").find('p').css({
								
								});
							$("#content").css({
								top:win_height*0.22
								});
								
								
							$("#boximage").css({
								width:win_width,
								height:win_height-8,
								bottom:0
								});
							
							//光标样式
							$(".curBg1").css({
								top:win_height*0.055,
								
								});
								
							//标题栏字体样式
							$("#images01").css({
								width:win_width*0.04,
								height:win_height*0.03
								});
							$("#image01").css({
								left:win_width*0.1,
								top:win_height*0.02
								});
								
							$("#images02").css({
								width:win_width*0.055,
								height:win_height*0.0299
								});
							$("#image02").css({
								left:win_width*0.19,
								top:win_height*0.02
								});
							$("#images03").css({
								width:win_width*0.035,
								height:win_height*0.031
								});
							$("#image03").css({
								left:win_width*0.30,
								top:win_height*0.02
								});
							$("#images04").css({
								width:win_width*0.034,
								height:win_height*0.03
								});
							$("#image04").css({
								left:win_width*0.613,
								top:win_height*0.02
								});
							$("#images05").css({
								width:win_width*0.036,
								height:win_height*0.038
								});
							$("#image05").css({
								left:win_width*0.703,
								top:win_height*0.015
								});
							$("#images06").css({
								width:win_width*0.055,
								height:win_height*0.03
								});
							$("#image06").css({
								left:win_width*0.793,
								top:win_height*0.018
								});
								
								
								
								
							//简介样式
							$("#jianjie_div").css({
								left:win_width*0.5-win_width*0.32*0.5,
								bottom:win_height*0.4
								});
							$("#jianjie").css({
								width:win_width*0.32,
								height:win_height*0.13
								});
							//服务范围样式
							$("#fuwu_div").css({
								left:win_width*0.5-win_width*0.4*0.5,
								bottom:win_height*0.3
								});
							$("#fuwu").css({
								width:win_width*0.38,
								height:win_height*0.4
								});
								
							//新闻块布局
							$(".xinwen_content").css({
								width:win_width*0.4,
								"margin-left":win_width*0.5-win_width*0.075
								});
							$(".xinwen_content_2").css({
								width:win_width*0.4,
								"margin-left":win_width*0.12
								});
							$("#content").css({
								width:win_width,
								});
							$(".fontsize").css({
								"font-size":win_width*0.01
								});
							$(".fontsize_1").css({
								"font-size":win_width*0.038
								});
							$(".fontsize_2").css({
								"font-size":win_width*0.014
								});
							
						
						}
						var target = ["5icool-01"];

						//下拉脚本的引入函数 方便调试
						(function( $ ){
	 
							var size=0;		 
							 $.fn.scrollPagination = function(options) {
							  	
									var opts = $.extend($.fn.scrollPagination.defaults, options);  
									var target = opts.scrollTarget;
									if (target == null){
										target = obj; 
								 	}
									opts.scrollTarget = target;
								 
									return this.each(function() {
									  $.fn.scrollPagination.init($(this), opts);
									});
							
							  };
							  
							  $.fn.stopScrollPagination = function(){
								  return this.each(function() {
								 	$(this).attr('scrollPagination', 'disabled');
								  });
								  
							  };
							  
							  $.fn.scrollPagination.loadContent = function(obj, opts){
								 var target = opts.scrollTarget;
								 var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
								 if (mayLoadContent){
									 if (opts.beforeLoad != null){
										opts.beforeLoad(); 
									 }
									 $(obj).children().attr('rel', 'loaded');
									 $.ajax({
										  type: 'POST',
										  url: opts.contentPage,
										  data:{currentPage:size},//opts.contentData,
										  success: function(data){
										  	//alert(data);
										  	if(opts.addContent123!=null) {
										  		size=size+1;
										  		var jsonObject=JSON.parse(data);//将返回的数据转化为json类型
												opts.addContent123(jsonObject,obj);
											}
											/*
										   	var jsonObject=JSON.parse(data);//将返回的数据转化为json类型 
											size=size+1;
											
											var html="<li style='opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);height=60px'><font size='20' color='red'>"+jsonObject.page+"</font></li>";
											$(obj).append(html); 
											var objectsRendered = $(obj).children('[rel!=loaded]');*/
											var objectsRendered = $(obj).children('[rel!=loaded]');
											
											if (opts.afterLoad != null){
												opts.afterLoad(objectsRendered);	
											}
										  },
										  dataType: 'html'
									 });
								 }
								 
							  };
							  
							  $.fn.scrollPagination.init = function(obj, opts){
								 var target = opts.scrollTarget;
								 $(obj).attr('scrollPagination', 'enabled');
								
								 $(target).scroll(function(event){
									if ($(obj).attr('scrollPagination') == 'enabled'){
								 		$.fn.scrollPagination.loadContent(obj, opts);		
									}
									else {
										event.stopPropagation();	
									}
								 });
								 
								 $.fn.scrollPagination.loadContent(obj, opts);
								 
							 };
								
							 $.fn.scrollPagination.defaults = {
							      	 'contentPage' : null,
							     	 'contentData' : {},
									 'beforeLoad': null,
									 'afterLoad': null	,
									 'scrollTarget': null,
									 'heightOffset': 0	,
									 'addContent123': null	  
							 };	
						})( jQuery );
						
						//下拉分页脚本实现
						
						$(function(){
							var var_currentPage=1;
							$('#content').scrollPagination({
								'contentPage': "ajGetNewsAction", // the url you are fetching the results
								'contentData': {currentPage:var_currentPage}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
								'scrollTarget': $(window), // who gonna scroll? in this example, the full window
								'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
								'beforeLoad': function(){ // before load function, you can display a preloader div
									$('#loading').fadeIn();	
						
								},
								'addContent123': function(reData,obj){ // after loading content, you can use this function to animate your new elements
									//alert("fds:"+reData);
									//alert("fds:"+reData.currentPage+","+obj); 
									//$(obj).children().attr('rel', 'loaded')
									//var html="<li style='opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);height=60px'><font size='20' color='red'>"+reData.pageSize+"</font></li>";
									var html = getHtml(reData);
									$(obj).append(html); 
									
								},
								'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
									 $('#loading').fadeOut();
									 var i = 0;
									 $(elementsLoaded).fadeInWithDelay();
									 if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
									 	$('#nomoreresults').fadeIn();
										$('#content').stopScrollPagination();
									 }
								},
								
							});
							
							// code for fade in element by element
							$.fn.fadeInWithDelay = function(){
								var delay = 0;
								return this.each(function(){
									$(this).delay(delay).animate({opacity:1}, 200);
									delay += 100;
								});
								
							};
								   
						});
						function getHtml(data) {
							alert("abc:"+data.pageList);
							var list = data.pageList;
							//alert(list);
							var html = "";
							var i = 1;
							for(var news in list) {
								//news = JSON.parse(news);
								//alert(list[0]);
								if(i%2!=0) {
									//alert("a");
									html = html+"<div style='border:0px solid red;width:40%;margin-top:1.5%' class='xinwen_content'>"+
									"<table width='100%' border='0'  style='border:1px solid gray;'>"+
										"<tr>"+
											"<td align='center' width='12%' style=''>"+
												"<table width='100%' border='1' style='background-color:gray'>"+
													"<tr >"+
														"<td align='center'  colspan='2'><font size='7px' color='white' class='fontsize_1'>24</font></td>"+	
													"</tr>"+
													"<tr >"+
														"<td align='right' width='20%' ><font class='fontsize_2' color='white'>4.</td>"+
														"<td align='left' width='*'><font class='fontsize_2' color='white'>2013</td>"+
													"</tr>"+
												"</table>"+
											"</td>"+
											"<td width='*' style='background-color:white;'>"+
											"<div style='font-family:Tahoma;font-family:Arial, Hel,Microsoft YaHei;margin-left:10px;' class='fontsize'>"+
												"<a href=='#'>"+
													list[news].title+	    					
												"</a>"+
											"</div>"+   			
											"</td>"+
										"</tr>"+
									"</table>"+
								"</div>";
								} else {
									//alert("b");
								}
								i = i+1;
							}
							//return "<li style='opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);height=60px'><font size='20' color='red'>"+data.pageSize+"</font></li>";
							return html;	
						}
</script>


<link href="css/5icool.org.css" rel="stylesheet" type="text/css">


</head>
<body style="">
	<!--顶部导航栏-->

			
		<div id="back"  style='clear:both;z-index:1;position:absolute;border:0px solid red;background-color:gray;height:33px;width:100%;'></div>
		<div style='height:8px;width:100%;background-color:black;z-index:3;position:absolute;'> </div>
				
					<!--导航标题-->
							<div class='imag' style='position:absolute;z-index:3;display:none' id='image01'> 
								<a href="#">
							    <img src='images/detail.png' id='images01' class="cur"/>
							  </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image02'> 
					    	<a href="#">
							    <img src='images/detail2.png' id='images02' class="cur"/>
							    </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image03'> 
					    	<a href="#">
							    <img src='images/detail3.png' id='images03' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image04'> 
					     	<a href="#">
							    <img src='images/detail4.png' id='images04' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image05'> 
					     	<a href="#">
							    <img src='images/detail5.png' id='images05' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image06'> 
					     	<a href="#">
							    <img src='images/detail6.png' id='images06' class="cur"/>
							    </a>
					    </div>
					    
					    <!-- 光标下划线 -->
					    <div class="curBg1" style='position:absolute;z-index:3;display:none'></div>
					    <div class="cls" style='position:absolute;z-index:3;display:none'></div>
				 
					    
						<!-- 简介页面 -->			 
							 
					     <div id='jianjie_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/jianjie.png' id='jianjie'/>
					    </div>
					    
					  <!-- 服务范围页面 -->			 
					     <div id='fuwu_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/fuwu.png' id='fuwu'/>
					    </div>
						
		
	<!--顶部中心图标-->
		<div id="ding_logo_div" style='z-index:5;position:absolute;border:0px solid blue'>
				<img src='images/ding_logo.png' id="ding_logo"/>	
			</div>
		<!--背景尖角图标-->	
			<div id='box1' style='position:absolute;border:1px solid green;margin:0;z-index:2;'>
					<img src='images/title.png' id='boximage' style='margin:0;position:absolute;z-index:2'/>		
						
			</div>
			<div style="position:absolute;border:0px solid red;z-index:2;background:url('images/ping.png');" id='content'>
				<div class="loading" id="loading">Wait a moment... it's loading!</div>
    			<div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
				
				<!-- 新闻样式 -->
				<!--向右div样式-->	
				<div style='border:0px solid red;width:40%;margin-top:1.5%' class='xinwen_content'>
					<table width='100%' border="0"  style='border:1px solid gray;'>
						<tr>
							<td align="center" width="12%" style=''>
								<table width="100%" border="1" style="background-color:gray">
									<tr >
										<td align="center"  colspan='2'><font size="7px" color="white" class='fontsize_1'>24</font></td>	
									</tr>
									<tr >
										<td align="right" width="20%" ><font class='fontsize_2' color="white">4.</td>
										<td align="left" width="*"><font class='fontsize_2' color="white">2013</td>
									</tr>
								</table>
							</td>
							<td width="*" style='background-color:white;'>
							<div style='font-family:Tahoma;font-family:Arial, Hel,Microsoft YaHei;margin-left:10px;' class='fontsize'>
								<a href=='#'>
									第三发电发生的发生大幅度释放,发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度 
									第三发电发生的发生大幅度释放,发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度 	    					
								</a>
							</div>   			
							</td>
						</tr>
					</table>
				</div>
				<!--向左div样式-->	
				<div style='border:0px solid red;width:40%;margin-top:1.5%' class='xinwen_content_2'>
					<table width='100%' border="0"  style='border:1px solid gray;'>
						<tr>
								
							<td width="*" style='background-color:white;'>
								<div style='font-family:Tahoma;font-family:Arial, Hel,Microsoft YaHei;margin-left:10px;' class='fontsize'>
									<a href=='#'>
										第三发电发生的发生大幅度释放,发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度 
										第三发电发生的发生大幅度释放,发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度释发生大幅度 
									</a>
								</div>   			
							</td>
							<td align="center" width="12%" style=''>
									<table width="100%" border="1" style="background-color:gray">
										<tr >
											<td align="center"  colspan='2' ><font  color="white" class='fontsize_1'>24</font></td>	
										</tr>
										<tr>
											<td align="right" width="20%" ><font  color="white" class='fontsize_2'>4.</td>
											<td align="left" width="*"><font  color="white " class='fontsize_2'>2013</td>
										</tr>
									</table>
							</td>
						</tr>
					</table>
				</div>
				
				
				<!--底部中心图标-->	
		
				<div style="margin-top:100px">
					<div style='z-index:5;position:fixed;border:0px solid blue;bottom:0;' id="bottom_logo_div">
						<img src='images/bottom_logo.png' id="bottom_logo"/>	
					</div>
					<div style='z-index:4;position:fixed;border:0px solid blue;bottom:0;' id="bottom_di_div">
						<img src='images/di.png' id="bottom_di"/>	
					</div>
					<div style='height:8px;width:100%;background-color:black;z-index:3;position:fixed;border:0px solid blue;bottom:0;' > </div>
				</div>
			</div>
				
						
					
	
					<!--幻灯片背景-->
					 <div class="box" style='margin:0;border:0px solid blue;z-index:-1;position:absolute'>
						<div id="bigpicarea" style="margin:0;border:0px solid red;z-index:-1;position:absolute">
						<p class="bigbtnPrev"><span id="big_play_prev"></span></p>
						<div id="image_5icool-01" class="image" style="opacity: 1; display: block; ">
							<a href=""  >
								<img src="images/shou_1.jpg" class='images'></a>
							<div class="word" style="display: block;"></div>
						</div>
       
					
        
         <p class="bigbtnNext"><span id="big_play_next"></span></p>
    </div>
	 </div>
		
		
		
			
		
			
			
	
</body>
</html>